<template>
	<view class="my-integral page-background">
		<view class="integral-total item-box">
			<view @click="toRule" class="integral-rule flex-box">
				<text>积分规则</text>
				<van-icon name="arrow" size="14px" color="#999999" />
			</view>
			<view class="total flex-box">
				<image :src="'@/static/images/mine/icon-integral-grey.png'|addBaseImgUrl" mode=""></image>
				<view class="count">
					<text>{{pointsData.points}}</text>积分
				</view>
			</view>
			<view class="tips" v-if="pointsData.overduePoints">
				您有<text>{{pointsData.overduePoints}}</text>积分即将过期，请尽快使用～
			</view>
		</view>
		<view class="integral-records item-box">
			<van-tabs color="#2E87FF" @change="onTabChange">
				<van-tab title="全部">
					<view class="records-list">
						<view v-for="(item, index) in recordsList" :key="index" class="records-item">
							<view class="records-title">
								{{item.content}}
							</view>
							<view class="records-time">
								{{item.createDate | toFullTimeString}}
							</view>
							<view :class="item.inOut==1?'count red':'count'">
								<text>{{item.inOut==1?'+'+item.amount:item.amount}}</text>
							</view>
						</view>
						<xjx-nodata v-if="nodataShow" :marginTop="'50px'"></xjx-nodata>
					</view>
				</van-tab>
				<van-tab title="收入">
					<view class="records-list">
						<view v-for="(item, index) in recordsInList" :key="index" class="records-item">
							<view class="records-title">
								{{item.content}}
							</view>
							<view class="records-time">
								{{item.createDate | toFullTimeString}}
							</view>
							<view :class="item.inOut==1?'count red':'count'">
								<text>{{item.inOut==1?'+'+item.amount:item.amount}}</text>
							</view>
						</view>
						<xjx-nodata v-if="nodataShow" :marginTop="'50px'"></xjx-nodata>
					</view>
				</van-tab>
				<van-tab title="支出">
					<view class="records-list">
						<view v-for="(item, index) in recordsOutList" :key="index" class="records-item">
							<view class="records-title">
								{{item.content}}
							</view>
							<view class="records-time">
								{{item.createDate | toFullTimeString}}
							</view>
							<view :class="item.inOut==1?'count red':'count'">
								<text>{{item.inOut==1?'+'+item.amount:item.amount}}</text>
							</view>
						</view>
						<xjx-nodata v-if="nodataShow" :marginTop="'50px'"></xjx-nodata>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<view v-if="recordsList.length>0||recordsInList.length>0||recordsOutList.length>0" class="bottom-text">
			<van-loading v-if="!allPagesLoaded" type="spinner" :size="24"/>
			<text v-else>我也是有底线的～</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				type: 0, //积分类型 0.全部 1.收入 2.支出 ,
				pointsData: {},
				recordsList: [],
				recordsInList: [],
				recordsOutList: [],
				pageLoaded: false,
				pageNo: 0,
				defaultPageSize: 20,
				allPagesLoaded: false,
				nodataShow: false
			};
		},
		onLoad(data) {
			this.getTotalPoints()
			this.getPointRecords()
		},
		computed: {
			...mapState(['userInfo', 'accessToken']),
		},
		async onReachBottom() {
			if(!this.pageLoaded||this.allPagesLoaded){
				console.log(!this.pageLoaded,this.allPagesLoaded)
				return false
			}
			this.getPointRecords()
		},
		methods: {
			async getTotalPoints() {
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				const res = await this.$api.getPoints(param)
				if (res && res.code == 200) {
					this.pointsData = res.data
				}
			},
			async getPointRecords() {
				const param = {
					'ACCESS-TOKEN': this.accessToken,
					pageSize: this.defaultPageSize,
					pageNo: this.pageNo+1,
					type: this.type||''
				}
				let res = await this.$api.getPointsRecords(param)
				if (res && res.code == 200) {
					let d = res.data
					if(d.pageNo==1&&d.list.length==0){
						this.nodataShow = true
					}else{
						this.nodataShow = false
					}
					if(this.type=='1'){
						this.recordsInList.push(...d.list)
					}else if(this.type=='2'){
						this.recordsOutList.push(...d.list)
					}else{
						this.recordsList.push(...d.list)
					}
					if(d.count <= d.pageNo * d.pageSize){
						this.allPagesLoaded = true
					}
					this.pageNo ++
				}
				this.pageLoaded = true
			},
			toRule() {
				uni.navigateTo({
					url: '/personalCenter/myIntegral/rule/rule'
				})
			},
			onTabChange(e) {
				this.type = e.detail.name
				this.pageNo = 0
				this.recordsList = []
				this.recordsInList = []
				this.recordsOutList = []
				this.pageLoaded = false
				this.allPagesLoaded = false
				this.getPointRecords()
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-integral {
		min-height: 100vh;
		overflow: hidden;
		.bottom-text{
			text-align: center;
			line-height: 40px;
			height: 80rpx;
			font-size: 24rpx;
			color: #999;
		}
		.integral-total {
			padding: 80rpx 20rpx 25rpx;
			text-align: center;
			color: $text-color-grey;
			position: relative;

			.integral-rule {
				position: absolute;
				right: 20rpx;
				top: 30rpx;
				line-height: 28rpx;
				font-size: 28rpx;
				align-items: center;

				text {
					margin-right: 10rpx;
				}
			}

			.total {
				justify-content: center;
				align-items: center;

				image {
					width: 39rpx;
					height: 36rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}

				.count {
					font-size: 28rpx;

					text {
						color: $public-color-yellow1;
						font-size: 48rpx;
						margin-right: 10rpx;
					}
				}

				.tips {
					font-size: 28rpx;
					margin-top: 10rpx;

					text {
						color: $public-color-yellow1;
					}
				}
			}
		}

		.integral-records {
			overflow: hidden;

			.records-list {
				.records-item {
					padding: 25rpx;
					position: relative;

					.records-title {
						width: 480rpx;
						font-size: 32rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}

					.records-time {
						margin-top: 15rpx;
						font-size: 28rpx;
						color: $text-color-grey;
					}

					.count {
						position: absolute;
						right: 25rpx;
						top: 25rpx;
						font-size: 24rpx;

						text {
							font-size: 36rpx;
						}

						&.red {
							color: red;
						}
					}
				}
			}
		}

		.no-data {
			margin-bottom: 200rpx;
		}
	}
</style>
<style lang="scss">
	.van-tabs__nav {
		height: 50px;
		line-height: 50px;

		.van-ellipsis {
			line-height: 50px;
		}

		.van-tab--active {
			color: $public-color-blue1;
		}
	}

	.van-tabs__wrap {
		height: 50px !important;
	}

	.van-tabs {
		.van-sticky {
			z-index: 2 !important;
		}
	}

	.van-tab__pane--active {
		border-top: 1rpx solid #E9E9E9 !important;
	}
</style>
